<div class="classify">
	<!-- 增加 -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" id="add">
        增加
    </button>
  
	<!-- 增加模态框 -->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
			<h5 class="modal-title" id="exampleModalLabel">新增栏目信息</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
			</div>
			<div class="modal-body">
				<form>
					<!-- <div class="form-group">
						<label for="id">序号</label>
						<input type="text" class="form-control" id="id" aria-describedby="emailHelp" name="id">
					</div> -->
					<div class="form-group">
						<label for="name">名称</label>
						<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="name">
					</div>
					<div class="form-group">
						<label for="realname">排序号</label>
						<input type="text" class="form-control" id="no" name="no">
					</div>
					<div class="form-group">
						<label for="parentId">父栏目</label>
						<input type="text" class="form-control" id="parentId" aria-describedby="emailHelp" name="parentId">
					</div>
					<div class="form-group">
						<label for="description">描述</label>
						<input type="text" class="form-control" id="description" aria-describedby="emailHelp" name="description">
					</div>
				</form>
			</div>
			<div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
			<button type="button" class="btn btn-primary" id="save">确认</button>
			</div>
		</div>
		</div>
	</div>
	<table class="table">
		<thead>
		  <tr>
			<th scope="col">序号</th>
			<th scope="col">名称</th>
			<th scope="col">排序号</th>
			<th scope="col">父栏目</th>
			<th scope="col">描述</th>
			<th scope="col">操作</th>
		  </tr>
		</thead>
		<tbody>
		  
		</tbody>
	  </table>
</div>


<script>
	 var users;
	 var id;
	 var name
    //  var token=sessionStorage.getItem("token")
    //  console.log(token);
	//查询所有信息
     function getUsers(){
         $.ajax({
         url:'http://182.92.83.218:7788/category/findAll',
         type:'GET',
         headers:{
             "Authorization":sessionStorage.getItem("token")
         },
         success:function(data){
            //  console.log(data);
             users=data.data;
             users.forEach(function(item){
                //  console.log(item)
                //  console.log($("tbody"))
                $(`
                <tr>
                    <td>`+item.id+`</td>
                    <td>`+item.name+`</td>
                    <td>`+item.no+`</td>
                    <td>`+item.parentId+`</td>
					<td>`+item.description+`</td>
					<td>
						<span class='edit' data-toggle="modal" data-target="#exampleModal">编辑</span>
						<span class='delete'>删除</span>
					</td>
                </tr>
                `).appendTo($("tbody"));
             });

         }
     })
     }
     getUsers()

	 //点击增加按钮，弹出模态框
	 	$('#add').click(function(){
			//  console.log($("#name"))
			$("#id").val('');
			$("#name").val('');
			$('#description').val('');
			$("#no").val('');
			$('#parentId').val('');
			// $('#exampleModal').modal('show')

		})
     //4.给删除按钮绑定事件(事件代理)
     $('tbody').on('click','.delete',function(){
         //1.获取id
         var id=$(this).parents('tr').children().eq(0).text();
         console.log(id);
         //2.发送删除请求
         $.ajax({
             url:'http://182.92.83.218:7788/category/deleteById?id='+id,
             type:'GET',
             headers:{
                 "Authorization":sessionStorage.getItem("token")
             },
             success:function(data){
                //  console.log(data);
                 if(data.status==200){
					 alert('删除成功')
                     //清空tbody中的tr
                     $('tbody').empty();
                     //3.刷新页面
                     getUsers()
                 }else{
					 alert(data.message);
				 }
             }
         })
	 })
	 // 新增栏目信息
	$("#save").on("click",function() {
		// console.log(id);
		var name = $("#name").val();
		var description=$('#description').val();
		var no = $("#no").val();
		var parentId=$('#parentId').val();
		if(id){
			var user={
				id:id,
				name:name,
				no:no,
				parentId:parentId,
				description:description
			}
		}else{
			var user={
				name:name,
				no:no,
				parentId:parentId,
				description:description
			}

		}
		$.ajax({
			url:'http://182.92.83.218:7788/category/saveOrUpdate',
			type:'POST',
			headers:{
                 "Authorization":sessionStorage.getItem("token")
             },
			data:user,
			success:function(res){
				// console.log(res);
				// console.log(user)
				// 关闭模态框
				$("#exampleModal").modal("hide")
				// 重新查询栏目信息
				$('tbody').empty();
				getUsers();
			}
			
		})

	})
	//编辑(事件代理)
	$('.classify tbody').on('click','.edit',function(){
		//获取当行数据
		id=$(this).parent().parent().children().eq(0).text()
		// console.log(id)
		var editDate=users.filter(function(item){
			// console.log(item.id);
			if(item.id==id){
				// $('#exampleModal').modal('show')
				$('#id').val(item.id);
				$('#name').val(item.name);
				$('#no').val(item.no);
				$('#parentId').val(item.parentId)
				$('#description').val(item.description)
			}
			
		})
		
	})
	


  </script>